<template>
  <div class="app-container visualImg">
    <li class="list">
      <div class="part_nav part1">
        <p class="firstTitle">界面 logo</p>
        <p class="subTitle">建议PNG，240×40</p>
      </div>
      <div class="part_nav part2">
        <img-upload limit="1" :imgList="logoImages" type="2"></img-upload>
      </div>
      <!--<div class="part_nav part3">-->
      <!--<div @click="submit1">保存</div>-->
      <!--</div>-->
    </li>
    <li class="list">
      <div class="part_nav part1">
        <p class="firstTitle">登录界面背景图</p>
        <p class="subTitle">建议PNG，1920×800</p>
      </div>
      <div class="part_nav part2">
        <img-upload limit="3" :imgList="loginImages" type="0"></img-upload>
      </div>
      <div class="part_nav part3" v-if="hasRole('images:system:edit')">
        <div @click="submit2">保存</div>
      </div>
    </li>
    <!--<li class="list">-->
    <!--<div class="part_nav part1">-->
    <!--<p class="firstTitle">主界面 logo</p>-->
    <!--<p class="subTitle">建议PNG，96×40</p>-->
    <!--</div>-->
    <!--<div class="part_nav part2">-->
    <!--<img-upload limit="1" :imgList="imgArr3" type="navLogo"></img-upload>-->
    <!--</div>-->
    <!--<div class="part_nav part3">-->
    <!--<div @click="submit3">保存</div>-->
    <!--</div>-->
    <!--</li>-->
    <li class="list">
      <div class="part_nav part1">
        <p class="firstTitle">组织管理</p>
        <p class="subTitle">建议PNG，50×50</p>
      </div>
      <div class="part_nav part2">
        <img-upload limit="1" :imgList="orgImages" type="3"></img-upload>
      </div>
    </li>
    <li class="list">
      <div class="part_nav part1">
        <p class="firstTitle">看板实景图轮播</p>
        <p class="subTitle">建议PNG，350×250</p>
      </div>
      <div class="part_nav part2">
        <img-upload limit="8" :imgList="boardImages" type="1" :isMultiple="true"></img-upload>
      </div>
      <div class="part_nav part3" v-if="hasRole('images:system:edit')">
        <div @click="submit5">保存</div>
      </div>
    </li>
    <li class="list">
      <div class="part_nav part1">
        <p class="firstTitle">主界面系统名称</p>
      </div>
      <div class="part_nav part2">
        <p v-if="!changeSystemName">{{sysInfo.sysName}}</p>
        <el-input class="change_input" v-else v-model="sysInfo.sysName" placeholder="" clearable></el-input>
      </div>
      <div class="part_nav part3" v-if="hasRole('images:system:edit')">
        <div @click="changeSystemName = true">修改</div>
        <div @click="saveSysName">保存</div>
      </div>
    </li>
    <li class="list">
      <div class="part_nav part1">
        <p class="firstTitle">版权信息</p>
      </div>
      <div class="part_nav part2">
        <p v-if="!changeCopyRight">{{sysInfo.copyRight}}</p>
        <el-input class="change_input" v-else v-model="sysInfo.copyRight" placeholder="" clearable></el-input>
      </div>
      <div class="part_nav part3"  v-if="hasRole('images:system:edit')">
        <div @click="changeCopyRight = true">修改</div>
        <div @click="saveCopyRight">保存</div>
      </div>
    </li>
  </div>
</template>

<script>
  import imgUpload from './imgUpload'

  export default {
    components: {
      imgUpload
    },
    data() {
      return {
        logoImages: [],
        loginImages: [],
        orgImages: [],
        boardImages: [],
        changeSystemName: false,
        sysInfo: {id: '', sysName: '', copyRight: ''},
        changeCopyRight: false,
      }
    },
    mounted() {
      let self = this;
      self.getSysInfo();
      self.getList();
    },
    methods: {
      saveCopyRight() {
        let self = this;
        let param = {id: self.sysInfo.id, copyRight: self.sysInfo.copyRight};
        self.$http({
          url: "/drug/sysInfo/updateSysInfo",
          method: "post",
          params: param
        }).then(resp => {
          if (resp.success) {
            self.changeCopyRight = false;
            this.$message.success('修改成功！');
            self.$eventBus.$emit("updateCopyRight", self.sysInfo.copyRight)
          } else {
            this.$message.error('修改报错，请联系管理员！');
          }
        });
      },
      saveSysName() {
        let self = this;
        let param = {id: self.sysInfo.id, sysName: self.sysInfo.sysName};
        self.$http({
          url: "/drug/sysInfo/updateSysInfo",
          method: "post",
          params: param
        }).then(resp => {
          if (resp.success) {
            self.changeSystemName = false;
            this.$message.success('修改成功！');
            self.$eventBus.$emit("updateSysName", self.sysInfo.sysName)
          } else {
            this.$message.error('修改报错，请联系管理员！');
          }
        });
      },
      getSysInfo() {
        let self = this;
        self.$http({
          url: "/drug/sysInfo/getSysInfoList",
          method: "post",
        }).then(resp => {
          if (resp.success) {
            self.sysInfo = resp.result;
          }
        });
      },
      getList() {
        let self = this;
        self.logoImages = [];
        self.loginImages = [];
        self.orgImages = [];
        self.boardImages = [];
        self.$http({
          url: "/drug/images/queryImagesListByType",
          method: "post",
          data: JSON.stringify({ids:['0','1','2','3']}),
          dataType: 'json',
          contentType: "application/json",
        }).then(resp => {

          if (resp.success) {
            for (let data of resp.result) {
              let fileType = data.fileType;
              if (fileType == 0) {
                self.loginImages.push(data)
              }
              if (fileType == 1) {
                self.boardImages.push(data)
              }
              if (fileType == 2) {
                self.logoImages.push(data)
              }
              if (fileType == 3) {
                self.orgImages.push(data)
              }

            }
          }
        });
      },

      submit2() {
        let params = [];
        let checkCount = 0;
        for (let i = 0; i < this.loginImages.length; i++) {
          let obj = {id: this.loginImages[i].id, fileCheck: this.loginImages[i].fileCheck};
          if (this.loginImages[i].fileCheck == 1) {
            checkCount++;
          }
          params.push(obj)
        }
        if(checkCount > 1){
          this.$message.warning('最多选择一张图片！');
        }else{
          this.updateImagesStatus(params);
        }
      },

      submit5() {
        let params = [];
        let checkCount = 0;
        for (let i = 0; i < this.boardImages.length; i++) {
          let obj = {id: this.boardImages[i].id, fileCheck: this.boardImages[i].fileCheck};
          if (this.boardImages[i].fileCheck == 1) {
            checkCount++;
          }
          params.push(obj)
        }
        if(checkCount == 0){
          this.$message.warning('最少选择一张图片！');
        }else{
          this.updateImagesStatus(params);
        }
      },
      updateImagesStatus(params) { //删除图片
        let self = this;
        self.$http({
          url: "/drug/images/updateImagesCheck",
          method: "post",
          data: JSON.stringify(params),
          dataType: 'json',
          contentType: "application/json",
        }).then(resp => {
          this.$message.success('保存成功');
        });

      },
    }
  }
</script>
<style lang="scss">
  .avatar-uploader_loginLogo {
    .el-upload--text {
      color: #34bfc6;
    }
  }
</style>
<style lang="scss" scoped>
  .visualImg {
    height: 100%;

    .list {
      border-top: 1px solid #f2f2f2;
      display: flex;
      align-items: center;
      min-height: 14.28%;

      &:nth-child(1) {
        border-top: 0;
      }

      .part2 {
        width: calc(82% - 150px);
        height: 100%;
        display: flex;
        align-items: center;
        padding: 15px 0;

        .imgList {
          width: 202px;
          height: 52px;
          border: 1px dashed #d9d9d9;
          background-color: #f2f2f2;
          border-radius: 6px;
          padding: 5px;

          img.avatar {
            width: 100%;
            height: 100%;
          }
        }

        .imgArr2 {
          width: 20%;
          margin-right: 5%;
          height: 55%;
          border: 1px dashed #d9d9d9;
          background-color: #f2f2f2;
          border-radius: 6px;
          padding: 5px;
          position: relative;
          transition: all .5s;

          &:hover {
            .icona {
              display: block;
            }
          }

          img.avatar {
            width: 100%;
            height: 100%;
          }

          .icona {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
            color: #fff;
            background: #f56c6c;
            padding: 2px;
            font-size: 14px;
            border-radius: 14px;
          }
        }

        p {
          font-size: 14px;
        }
      }

      .part1 {
        width: 18%;

        .firstTitle {
          font-size: 14px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 0;
        }

        .subTitle {
          font-size: 12px;
          text-align: center;
          color: #bbb;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 5px 0 0 0;
        }
      }

      .part3 {
        width: 150px;
        display: flex;
        justify-content: center;

        div {
          width: 40px;
          color: #34bfc6;
          text-align: center;
          cursor: pointer;
          font-size: 14px;

          &:hover {
            opacity: .7;
          }
        }
      }
    }
  }
</style>
